
<template>
    <div>
        <el-select v-model="gradeThree" placeholder="请选择年级" @change="changeGradeMu">
            <el-option label="小学" value="1"></el-option>
            <el-option label="初中" value="2"></el-option>
            <el-option label="高中" value="3"></el-option>
        </el-select>
        <el-select placeholder="请选择" @change="classChange"  multiple v-model="gradeList" style="margin-top:10px;width:100%;">
            <el-option v-for="it in gradeMulite" :key="it.value" :label="it.label" :value="it.value">
            </el-option>
        </el-select>
           
    </div>
</template>

<script>
import axios from 'axios'
import httpUrl from '@/assets/common'
import {
    Message
} from 'element-ui';
export default {
    data() {
        return { 
            gradeThree: '',
            gradeList: [],
            gradeMulite: []
        }
    },
    methods: {
        //多选年级
        changeGradeMu(val) {
            let gradeClone = []
            axios({
                method: 'get',
                url: httpUrl + 'web/Dictionary/getGrade/' + val,
                headers: { 'token': this.TOKEN }
            }).then(res => {
                if (res.data.code == 200) {
                    let { keys, values, entries } = Object;
                    for (let [key, val] of entries(res.data.data[0])) {
                        gradeClone.push({
                            value: key,
                            label: val
                        })
                    }
                    if (this.gradeMulite !== gradeClone) {
                        this.gradeMulite = gradeClone
                    }
                }
            })
        },

        // 年级选择回调
        classChange(val) {
            log(val)
            this.$emit('on-change', val)
        }
    },
     
}
</script>

 
 
